<template>
  <div>
    <template v-if="flowType !== 'createChapterApply'">

      <div class="workOrderHeader">
        <div class="workerOrderTitle">
          <em class="iconfont icon-zuojiantou" @click="backLastPage"/>
          <h2 v-if="flowType === 'chapterApply'">用章申请工单</h2>
          <h2 v-else-if="flowType === 'yhjy'">优化建议</h2>
          <h2 v-else-if="flowType === 'version'">版本说明</h2>
          <h2 v-else>任务派发工单</h2>
        </div>
        <div style="display: flex;box-shadow: 0 0 23px rgba(145, 43, 43, 0.12);" v-if="flowType !== 'yhjy' && flowType !== 'version' ">
          <div class="titleH3" v-for="titleItem in titleList" :key="titleItem.id" @click="havingBarSwitch(titleItem.id)">
            <h3 :class="titleItem.id === state ? 'colorBlack' : 'colorGray'">{{ titleItem.name }}</h3>
            <hr :class="titleItem.id === state ? 'visible' : 'hidden'"/>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="workOrderHeader1">
        <div class="workerOrderTitle">
          <em class="iconfont icon-zuojiantou" @click="backLastPage"/>
          <h2>用章申请工单</h2>
        </div>
      </div>
    </template>
  </div>
</template>


<script>
export default {
  name: "WorkOrderHeader",
  props: ["flowType"],
  data() {
    return {
      state: 'workOrderInform',
      titleList: [
        {
          id: 'workOrderInform',
          name: '工单信息'
        },
        {
          id: 'historyRecord',
          name: '审批记录'
        }
      ]
    }
  },
  methods: {
    //导航栏切换
    havingBarSwitch(id) {
      this.state = id;
      this.$store.commit('setWorkOrderType', id);
    },
    backLastPage() {
      this.$store.commit('setWorkOrderType', "workOrderInform");
      this.$router.back();
    }
  }


}
</script>

<style type="text/css">

.workOrderHeader {
  width: 100%;
  height: 100px;
  background-color: #faf9ff;

  position: fixed;
  top: 0;
  z-index: 1000;
  padding-bottom: 1em;
}

.workOrderHeader1 {
  width: 100%;
  height: 40px;
  background-color: #fff9f9;

  position: fixed;
  top: 0;
  z-index: 1000;
  padding-bottom: 1em;
}

.titleH3 {
  width: 50%;
  text-align: center;
  vertical-align: middle;
  background-color: white;
}

.workerOrderTitle .icon-zuojiantou:before {
  content: "\e618";
  position: fixed;
  font-size: 1.2em;
  left: 0.9em;
}

.workerOrderTitle {
  text-align: center;
  background-color: #F33622;
  height: 2em;
  padding-top: 1em;
  color: white;
  font-size: 1.3em;
  background-repeat: no-repeat;
  background-size: 80% auto;
}

.workerOrderTitle h2 {
  font-weight: normal;
}

.titleH3 h3 {
  margin: 1em 0.2em 0 0.2em;
  border-radius: 0.2em;
  font-size: 1.2em;
}

.titleH3 .visible {
  border: 2px solid red;
  background-color: red;
  width: 7em;
  visibility: visible;
  margin-bottom: 0;
}

.titleH3 .hidden {
  border: 2px solid red;
  background-color: red;
  width: 7em;
  visibility: hidden;
  margin-bottom: 0;
}

.titleH3 .colorBlack {
  color: black;
}

.titleH3 .colorGray {
  color: #ACACAC;
  font-size: 1em;
  margin-top: 1.2em;
}

</style>

